<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
    import BScroll from 'better-scroll';

    export default {
        name: "Scroller",
        data(){
            return {

            }
        },
        props : {
            handlerToScroll : {
                type : Function,
                default : function(){}
            },
            handlerToTouchEnd : {
                type : Function,
                default : function(){}
            }
        },
        mounted() {
            var scroll = new BScroll(this.$refs.wrapper,{
                probeType : 1
            });

            scroll.on("scroll",(pos)=>{
                this.handlerToScroll(pos);
            });
            scroll.on("touchEnd",(pos)=>{
                this.handlerToTouchEnd(pos);
            })
        }
    }
</script>

<style scoped>
    .wrapper{height: 100%}
</style>